<template>
  <view class="container_page">
    <action-bar :options="navOptions"></action-bar>

    <view class="mains">
      <uni-section title="基本信息" type="line">
        <!-- 服务类型 -->
        <view class="formItem">
          <view class="label">服务类型</view>
          <ld-select class="content flex align-center" :multiple="true" disabled :list="serviceType" label-key="text"
            value-key="value" placeholder="" v-model="valiFormData.serviceType" @change="serviceTypeChange"></ld-select>
        </view>

        <!-- 项目名称 -->
        <view class="formItem">
          <view class="label">项目名称</view>
          <input class="content" disabled v-model="valiFormData.name" placeholder="请输入项目名称" />
        </view>

        <!-- 项目负责人 -->
        <view class="formItem">
          <view class="label">项目负责人</view>
          <ld-select class="content flex align-center" disabled :list="leaderList" label-key="name" value-key="staffId"
            placeholder="" v-model="valiFormData.projectHead" @change="practChange"></ld-select>
        </view>

        <!-- 项目所在地区 -->
        <view class="formItem">
          <view class="label">项目所在地区</view>
          <input class="content" v-model="valiFormData.areaName" disabled placeholder="请输入所在区域" />
        </view>

        <!-- 项目详细地址 -->
        <view class="formItem">
          <view class="label">项目详细地址</view>
          <input class="content" disabled v-model="valiFormData.address" placeholder="暂无" />
        </view>

        <!-- 执业场所详细地址 -->
        <view class="formItem">
          <view class="label">执业场所详细地址</view>
          <input class="content" disabled v-model="valiFormData.placeName" placeholder="暂无" />
        </view>

        <!-- 技术负责人 -->
        <view class="formItem">
          <view class="label">技术负责人</view>
          <ld-select class="content flex align-center" disabled :list="directorList" label-key="name"
            value-key="staffId" placeholder="" v-model="valiFormData.technologyHead" @change="practChange"></ld-select>
        </view>

        <!-- 执业人员 -->
        <view class="formItem">
          <view class="label">执业人员</view>
          <ld-select class="content" :multiple="true" disabled :list="practList" label-key="name" value-key="staffId"
            placeholder="" v-model="valiFormData.staffIdList" @change="practChange"></ld-select>
        </view>

        <!-- 委托单位 -->
        <view class="formItem">
          <view class="label">委托单位</view>
          <input class="content" v-model="valiFormData.entrustUnit" placeholder="请输入委托单位" disabled />
        </view>

        <!-- 委托单位电话 -->
        <view class="formItem">
          <view class="label">委托单位电话</view>
          <input class="content" v-model="valiFormData.entrustUnitPhone" placeholder="请输入委托单位电话" disabled />
        </view>

        <!-- 委托联系人 -->
        <view class="formItem">
          <view class="label">委托联系人</view>
          <input class="content" v-model="valiFormData.entrustContact" placeholder="请输入委托联系人" disabled />
        </view>

        <!-- 委托联系人电话 -->
        <view class="formItem">
          <view class="label">委托联系人电话</view>
          <input class="content" v-model="valiFormData.entrustContactPhone" placeholder="请输入委托联系人电话" disabled />
        </view>
      </uni-section>
      <view v-for="(item, index) in valiFormData.projectServeList" :key="index">
        <uni-section :title="`服务对象${item.name}`" type="line">
          <!-- 建筑物(场所)名称 -->
          <view class="formItem">
            <view class="label">建筑物(场所)名称</view>
            <input class="content" v-model="item.name" disabled placeholder="请输入建筑物(场所)名称" />
          </view>

          <!-- 建筑物(场所)类别 -->
          <view class="formItem">
            <view class="label">建筑物(场所)类别</view>
            <input class="content" v-model="item.type" disabled placeholder="请输入建筑物(场所)名称" />
          </view>
          <view class="formItem" v-if="item.type == '工业（厂房、仓库）' || item.type == '工业（装置、储罐）' || item.type == '堆场'">
            <view class="label">最高火灾危险性</view>
            <input class="content" disabled v-model="item.maxFireRisk" />
          </view>
          <view class="formItem" v-if="item.type == '民用' || item.type == '工业（厂房、仓库）'">
            <view class="label">建筑总层数</view>
            <span class="content">地上{{ item.upLayer || 0 }}层，地下{{ item.lowLayer || 0 }}层</span>
          </view>
          <view class="formItem" v-if="item.type == '民用' || item.type == '工业（厂房、仓库）'">
            <view class="label">单体建筑面积(m2)</view>
            <input class="content" disabled v-model="item.areaSize" />
          </view>
          <view class="formItem" v-if="item.type == '民用' || item.type == '工业（厂房、仓库）'">
            <view class="label">维保(检测)楼层或部位</view>
            <input class="content" disabled v-model="item.detectionFloor" />
          </view>
          <view class="formItem" v-if="item.type == '民用' || item.type == '工业（厂房、仓库）'">
            <view class="label">服务总面积(m2)</view>
            <input class="content" disabled v-model="item.totalSize" />
          </view>
        </uni-section>
      </view>
    </view>
  </view>
</template>

<script>
import ldSelect from '@/components/ld-select/ld-select'
import { serviceTypeList, buildingTypeList } from '@/utils/dictList.js'
export default {
  components: { ldSelect },
  data() {
    return {
      navOptions: {
        statusBar: 'dark',
        left: {
          icon: 'back'
        },
        center: {
          title: '项目信息'
        },
      },
      // 服务类型列表
      serviceType: serviceTypeList,
      // 建筑物(场所)类别列表
      placeType: buildingTypeList,
      projectId: '',
      // 项目负责人列表
      leaderList: [],
      // 技术负责人列表
      directorList: [],
      // 执业人员列表
      practList: [],
      // 校验表单数据
      valiFormData: {
        name: '',
        signDate: '',
        endDate: ''
      },
      // 校验规则
      rules: {},
      loading: false,
    }
  },
  onLoad(options) {
    // 获取任务id
    this.projectId = options.id
  },
  mounted() {
    // 获取人员信息
    this.getStaffList()
  },
  methods: {
    // 服务类型change
    serviceTypeChange(value) {
      this.valiFormData.serviceType = value
    },
    // 选择项目负责人change
    leaderChange(e) {
      this.valiFormData.projectHead = this.leaderList[e.detail.value].staffId
      this.valiFormData.showLeader = this.leaderList[e.detail.value].name
    },
    // 技术负责人change
    directorChange(e) {
      this.valiFormData.technologyHead = this.directorList[e.detail.value].staffId
      this.valiFormData.showDirector = this.directorList[e.detail.value].name
    },
    // 执业人员change
    practChange(value) {
      this.valiFormData.staffIdList = value
    },
    // 获取表单信息
    getForm() {
      if (this.loading) return
      this.loading = true
      uni.showLoading({
        title: '正在加载请稍后',
        mask: true
      });
      this.$store.dispatch("getDetailInfo", this.projectId).then((res) => {
        this.valiFormData = res
      })
        .finally(() => {
          this.loading = false
          uni.hideLoading();
        })
    },
    // 异步获取项目负责人、技术负责人、执业人员列表信息
    getStaffList() {
      let form = {
        pageNo: '-1',
        pageSize: '-1',
      }
      this.$store.dispatch('getListStaffByAll', form).then(({ code, data }) => {
        if (code == 200) {
          this.leaderList = data.projectList
          this.directorList = data.techList
          this.practList = data.practiceList
          // 获取表单
          this.getForm()
        }
      })
    },

    navTo() {
      this.$store.state.unitTask.taskId = this.taskId
      uni.navigateTo({
        url: '../../pages_workTableChild/manage/Collect'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";

::v-deep .uni-section {
  margin-top: 0;
  background-color: transparent;
}

.container_page {
  min-height: 100vh;
  width: 100vw;

  .mains {
    width: 100%;
    background: $OVERALL_SITUATION_BACKGROUND_GRADIENT;

    .formItem {
      width: calc(100% - 40rpx);
      margin: 0 auto 24rpx;
      background-color: #fff;
      border-radius: 20rpx;
      min-height: 110rpx;
      display: flex;
      align-items: center;
      padding: 24rpx;

      .label {
        color: #333;
        font-size: 28rpx;
        width: 270rpx;

        &::before {
          content: "*";
          margin: 0 10rpx;
          color: #ea0707;
        }
      }

      .content {
        width: calc(100% - 270rpx);
        font-size: 28rpx;
        text-align: right;
        justify-content: flex-end;

        ::v-deep .input {
          background-color: transparent !important;
          padding: 0 !important
        }
      }
    }

    .part {
      margin-bottom: 24rpx;
      padding: 24rpx;
    }
  }
}
</style>
